<template>
  <div class="box">
    <!-- <van-overlay
      :show="popupShow"
      :custom-style="{ top: '48px' }"
      @click="popupShow = !popupShow"
    >
      <transition name="van-slide-down">
       @click.stop v-if="popupShow"
      </transition>
    </van-overlay> -->
    <van-sticky>
      <van-nav-bar
          title="客戶报告单查询"
          right-text="切换账号"
          @click-right="loginOut"
          :border="false"
      >
        <!-- <template #right>
        <div>
          <van-icon name="search" color="#2bad37" size="20px" />
        </div>
      </template> -->
      </van-nav-bar>
      <div class="popup_class">
        <div>
          <div class="left2">姓名/电话/身份证：</div>
          <div class="right2">
            <van-search
                v-model="filters.patientQuery"
                placeholder="请输入姓名、电话或身份证"
            />
          </div>
        </div>

        <div>
          <div class="left">送检日期：</div>
          <div class="right">
            <van-button
                size="small"
                type="default"
                @click="
                showPicker = true;
                isTime = 1;
              "
            >{{
                filters.createDateBegin ? filters.createDateBegin : "开始时间"
              }}
            </van-button
            >
            -
            <van-button
                size="small"
                type="default"
                @click="
                showPicker = true;
                isTime = 2;
              "
            >{{
                filters.createDateEnd ? filters.createDateEnd : "结束时间"
              }}
            </van-button
            >
          </div>
        </div>
        <div>
          <div class="left1">报告单结果状态：</div>
          <div class="right1">
            <van-button
                type="default"
                size="small"
                @click="showPicker2 = true"
            >{{
                filters.resultState
                    ? filters.resultState == 0
                        ? "检测中"
                        : "已出结果"
                    : "请选择"
              }}
            </van-button
            >
          </div>
        </div>
        <div>
          <van-button
              type="default"
              style="width: 48%; margin: 0 auto"
              @click="onRepeat"
          >重置
          </van-button
          >
          <van-button
              color="#2bad37"
              style="width: 48%; margin: 0 auto"
              @click="onSearch"
          >查询
          </van-button
          >
        </div>
      </div>
    </van-sticky>

    <div class="list_container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="nodata" v-if="reportList.length == 0">
          <van-empty description="暂无数据"/>
        </div>
        <van-list
            v-else
            v-model="loading"
            :finished="finished"
            finished-text="暂无更多"
            @load="onload"
            :immediate-check="false"
            :offset="20"
        >
          <div class="reports" v-for="(item, index) in reportList" :key="index">
            <div class="r_c_2">
              <div class="left">
                <span class="span-1">检测结果：</span
                ><span class="span-2">{{
                  item.reportState == 20 ? "已出结果" : "检测中"
                }}</span>
              </div>
              <div class="right">
                <van-button
                    v-if="item.reportState == 20"
                    color="#2bad37"
                    style="height: 24px"
                    size="small"
                    @click="getResult(item.reportId)"
                >查看
                </van-button
                >
              </div>
            </div>
            <div class="r_c_1">
              <span class="span-1">送检时间：</span>
              <span class="span-2">{{ item.reportBeginTime }}</span>
            </div>
            <div class="r_c_1">
              <span class="span-1">姓名-性别-年龄：</span>
              <span class="span-2"
              >{{ item.patientName }}-{{
                  item.patientSex == 1 ? "男" : "女"
                }}-{{ item.patientAge }}岁</span
              >
            </div>
            <div class="r_c_1">
              <span class="span-1">医检机构：</span>
              <span class="span-2">{{ item.institutionName }}</span>
            </div>
            <div class="r_c_1">
              <span class="span-1">平台/医检条码号：</span>
              <span class="span-2">{{
                  item.myReportCode || item.insReportCode
                }}</span>
            </div>
            <div class="r_c_1">
              <span class="span-1">送检项目：</span>
              <span class="span-2">{{ item.itemName }}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
          @confirm="confirmTime"
          @cancel="cancelTime"
          v-model="timeValue"
          type="date"
          title="选择完整时间"
          :min-date="minDate"
          :max-date="maxDate"
      />
    </van-popup>
    <van-popup v-model="showPicker2" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import doctorGetApi from "@/api/doctorGet";
import reportListApi from "@/api/reportList";

export default {
  data() {
    return {
      reportList: [],
      loading: false,
      finished: false,
      refreshing: false,
      popupShow: false,
      showPicker: false,
      showPicker2: false,
      isTime: 1,
      filters: {
        // name: "",
        // phone: "",
        // idCare: "",
        patientQuery: "", //姓名/手机/身份证
        resultState: "", //报告单结果
        createDateBegin: "",
        createDateEnd: "",
        pageNo: 1,
        pageSize: 10,
      },
      total: "",
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      timeValue: "",
      columns: ["检测中", "已出结果"],
    };
  },
  created() {
    this.$Utils.getOpenid(this.$route.path);
    this.getList();
  },
  methods: {
    onSearch() {
      this.filters.pageNo = 1;
      this.getList();
    },
    onRepeat() {
      this.filters = {
        name: "",
        phone: "",
        idCare: "",
        // patientQuery: "", //姓名/手机/身份证
        resultState: "", //报告单结果
        createDateBegin: "",
        createDateEnd: "",
        pageNo: 1,
        pageSize: 30,
      };
    },
    onload() {
      this.loading = true;
      this.filters.pageNo++;
      this.getList();
    },
    getList() {
      let that = this;
      setTimeout(() => {
        if (that.refreshing) {
          that.reportList = [];
          that.refreshing = false;
        }

        let data = {
          pageNo: that.filters.pageNo,
          pageSize: that.filters.pageSize,
          patientQuery: that.filters.patientQuery,
          resultState: that.filters.resultState,
          createDateBegin: that.filters.createDateBegin,
          createDateEnd: that.filters.createDateEnd,
          accessToken: localStorage.getItem("wxOpenid"),
        };
        doctorGetApi.getList(data).then((res) => {
          that.total = res.data.total;
          that.filters.pageNo == 1
              ? (that.reportList = res.data.list)
              : (that.reportList = that.reportList.concat(res.data.list));
          that.loading = false;

          if (that.reportList.length >= that.total) {
            that.finished = true;
          }
        });
      }, 500);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.filters.pageNo = 1;
      this.getList();
    },
    confirmTime(e) {
      var date = this.timeValue;
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let t = date.getFullYear() + seperator1 + month + seperator1 + strDate;
      if (this.isTime == 1) {
        this.filters.createDateBegin = t + " 00:00:00";
      } else {
        this.filters.createDateEnd = t + " 00:00:00";
      }
      this.showPicker = false;
      this.timeValue = "";
    },
    cancelTime(e) {
      this.showPicker = false;
      if (this.isTime == 1) {
        this.filters.createDateBegin = "";
      } else {
        this.filters.createDateEnd = "";
      }
      this.timeValue = "";
    },
    onConfirm(value, index) {
      this.filters.resultState = index.toString();
      this.showPicker2 = false;
    },
    onCancel(value, index) {
      this.filters.resultState = "";
      this.showPicker2 = false;
    },
    getResult(reportId) {
      const params = {
        id: reportId
      }
      reportListApi.listReportInfo_2(params).then(res => {
        if (res.status === 0) {
          if (res.data) {
            this.$router.push({path: "/inspectReportList", query: {uri: res.data}});
          } else {
            this.$dialog.alert({
              title: "提示",
              message: "查询失败，请稍后再试"
            })
          }
        } else {
          this.$dialog.alert({
            title: "提示",
            message: res.msg
          })
        }
      }).catch(err => {
        this.$dialog.alert({
          title: "错误",
          message: err
        })
      })
    },
    loginOut() {
      this.$dialog
          .confirm({
            title: "提示",
            message: "是否切换账号",
          })
          .then((res) => {
            // localStorage.removeItem("wxOpenid");
            this.$router.push({path: "/doctorReport/login"});
          })
          .catch(() => {
          });
    },
  },
};
</script>

<style lang="less" scoped>
body {
}

.box {
  .popup_class {
    background-color: #fff;
    height: 220px;
    padding: 10px 10px;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid #dfe6e9;

    border-bottom: 1px solid #dfe6e9;

    > div {
      display: flex;
      font-size: 14px;
      min-height: 40px;
      margin-bottom: 10px;
      align-items: center;

      .left {
        width: 20%;
        text-align: right;
      }

      .right {
        width: 80%;
      }

      .left1 {
        width: 32%;

        > div {
        }
      }

      .right1 {
        width: 68%;
      }

      .left2 {
        width: 34%;

        > div {
        }
      }

      .right2 {
        width: 66%;
      }

      .van-search {
        padding: 0;
      }

      .van-button {
        width: 100px;
      }
    }
  }

  .list_container {
    .reports {
      width: 90%;
      min-height: 140px;
      border-radius: 6px;
      box-shadow: 0px 0px 4px 4px #dfe6e9;
      margin: 0px auto;
      margin-top: 20px;
      font-size: 14px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #ecf0f1;

      .r_c_1 {
        margin-bottom: 12px;
        font-weight: bold;

        .span-1 {
          width: 120px;
          display: inline-block;
        }

        .span-2 {
        }
      }

      .r_c_2 {
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .left {
          width: 60%;

          .span-1 {
            width: 120px;
            display: inline-block;
          }
        }

        .right {
          width: 40%;
          text-align: right;
        }
      }
    }
  }
}
</style>
